<template>
	<view>
    <Nav title="订单详情"></Nav>
    <Header></Header>
    <view class="layout">
      <Goods></Goods>
      <view class="list">
        <uv-list>
          <uv-list-item
              v-for="(item,index) in list"
              :key="index"
              :title="item.name"
              :right-text="item.value"
          ></uv-list-item>
        </uv-list>
      </view>
      <view class="btn">
        <uv-button
            type="primary"
            text="返回我的"
            @click="jumpFn"
        ></uv-button>
      </view>
    </view>
	</view>
</template>

<script setup>
import Goods from "./components/goods.vue";
import Header from "@/components/header.vue";
import {getOrder} from "@/request/api"
import {ref, onMounted} from "vue"
import Nav from "@/components/nav.vue";
const  list = ref([])
const pageNum = ref(1)
const id = ref()
onMounted(() => {
  const pages = getCurrentPages(); // 获取当前页面栈
  const currentPage = pages[pages.length - 1]; // 获取当前页面
  id.value = currentPage.options.id;
  // console.log(id.value, '---=')
  getOrder({pageNum: pageNum.value, pageSize: 10}).then(res => {
    if (res.code === 0) {
      const current = res.result.list.find(item => item.order_code === id.value)
      const goodsInfo = JSON.parse(current.goods_info);
      list.value = goodsInfo.map(item => {
        return [
          {
            name: '订单号',
            value: current.order_code
          },
          {
            name: '订单状态',
            value: '已支付'
          },
          {
            name: '订单金额',
            value: `￥${current.total}`
          },
        ];
      }).flat();
      if (res.result.total > 10) {
        return getOrder({pageNum: pageNum.value, pageSize: res.result.total});
      }
    }
  })
})
const jumpFn = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}
</script>

<style lang="scss" scoped>
.layout{
  height: calc(100vh - 88px);
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: #F5F5F5;
  //border: 1px solid red;
  &::-webkit-scrollbar {
    display: none;
  }
  padding: 15px;
  .list{
    width: 100%;
    background-color: #ffffff;
    margin-top: 15px;
    border-radius: 10px;
  }
  .btn{
    width: 100%;
    margin-top: 20px;
  }
}
</style>
